<template>
  <div class="container1" :class="{ print: type == '打印' }">
    <DocHeader
      ref="ryAdultEstimateRef"
      fromDoc="ryAdultEstimate"
      :title="title"
      :bottomBorder="false"
    >
    </DocHeader>
    <div class="content">
      <span>过&nbsp;敏&nbsp;史：</span>
      <!-- <input v-model="pageData.allergyHistory" class="w-4" /> -->
      <Select
        v-model="pageData.allergyHistory"
        :multiple="false"
        :filterable="true"
        :allow-create="true"
        :data="allergyHistoryList"
        placeholder=""
      />
      <br />
      <span class="f-b f-15 inline-block mt-6">心理</span>
      <br />
      <span>心理评估：</span>
      <Select
        v-model="pageData.psychological"
        :multiple="false"
        :filterable="true"
        :allow-create="true"
        :data="psychologicalList"
        placeholder=" "
      />
      <br />
      <div class="flex">
        <div class="flex" style="align-items: center">
          <span>睡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;眠：</span>
          <Select
            v-model="pageData.sleep"
            style="width: 180px; flex: 1"
            :multiple="false"
            :filterable="true"
            :allow-create="true"
            :data="sleepList"
            placeholder=" "
          />
        </div>
        <div class="flex" style="align-items: center">
          <div>服镇静剂：</div>
          <Select
            v-model="pageData.takeSedatives"
            style="width: 180px; flex: 1"
            :multiple="false"
            :filterable="true"
            :allow-create="true"
            :data="takeSedativesList"
            placeholder=" "
          />
        </div>
      </div>

      <span class="f-b f-15 inline-block mt-6">疼痛</span>
      <div class="flex" style="align-items: center">
        <!-- <div> -->
        <el-radio v-model="pageData.pain" label="有"> 有 </el-radio>
        <el-radio v-model="pageData.pain" label="无"> 无 </el-radio>
        <!-- </div> -->
        <div class="flex" style="margin-left: 30px">
          <span>评分：</span>
          <input v-model="pageData.painScore" style="width: 180px; flex: 1" />
        </div>
        <div>
          <span>疼痛评估工具：</span>
          <Select
            v-model="pageData.painTools"
            style="width: 180px; flex: 1"
            :multiple="false"
            :filterable="true"
            :allow-create="true"
            :data="painToolsList"
            placeholder=" "
          />
        </div>
      </div>
      <span class="f-b f-15 inline-block mt-6">皮肤</span>
      <br />
      <div class="flex" style="align-items: center">
        <div>
          <span>皮肤：</span>
          <Select
            v-model="pageData.skin"
            style="width: 180px; flex: 1"
            :multiple="false"
            :data="skinList"
            placeholder=" "
          />
        </div>
        <div>
          <span>压疮评分：</span>
          <input
            v-model="pageData.pressureScore"
            style="width: 180px; flex: 1"
          />
        </div>
      </div>
      <span class="f-b f-15 inline-block mt-6">自理能力</span>
      <br />
      <div class="flex" style="align-items: center">
        <div>
          <span>Barthel指数评定：</span>
          <input v-model="pageData.Barthel" style="width: 180px; flex: 1" />
        </div>
        <div>
          <span>自理能力等级：</span>
          <Select
            v-model="pageData.selfCare"
            style="width: 180px; flex: 1"
            :multiple="false"
            :data="selfCareList"
            placeholder=" "
          />
        </div>
      </div>
      <span>跌倒/坠床评分：</span>
      <input v-model="pageData.fall" class="w-4" />
      <br />
      <span class="f-b f-15 inline-block mt-6">营养</span>
      <br />
      <span>营养风险筛查：</span>
      <input v-model="pageData.nutrition" class="w-4" />
      <br />
      <span class="f-b f-15 inline-block mt-6">特殊人群评估：</span>
      <Select
        v-model="pageData.specialCrowd"
        :multiple="false"
        :filterable="true"
        :allow-create="true"
        :data="specialCrowdList"
        placeholder=""
      />
      <br />
      <div class="flex" style="align-items: center">
        <div class="flex">
          <span>联系人：</span>
          <input v-model="pageData.contactName" style="width: 180px; flex: 1" />
        </div>
        <div class="flex">
          <span>电话：</span>
          <input v-model="pageData.phone" style="width: 180px; flex: 1" />
        </div>
        <div class="flex" style="align-items: center">
          <span>资料来源：</span>
          <Select
            v-model="pageData.from"
            style="width: 180px; flex: 1"
            :multiple="false"
            :data="fromList"
            placeholder=" "
          />
        </div>
      </div>
      <br />
      <div class="flex" style="align-items: center">
        <div class="flex">
          <span>责任护士：</span>
          <div
            v-if="signPhoto(pageData.nurse, 'nursingDocument', docType)"
            style="width: 180px"
          >
            <img
              :src="
                'data:image/png;base64,' +
                signPhoto(pageData.nurse, 'nursingDocument', docType)
              "
              alt=""
              style="display: block; max-width: 98%; height: 24px"
              @click="handleSignImgClear('nurse')"
            />
          </div>
          <input
            v-else
            v-model="pageData.nurse"
            style="width: 180px; flex: 1"
            @blur="handleSignInputBlur('nurse')"
          />
        </div>
        <div class="flex">
          <span>责任医生：</span>
          <div
            v-if="signPhoto(pageData.doctor, 'nursingDocument', docType)"
            style="width: 180px"
          >
            <img
              :src="
                'data:image/png;base64,' +
                signPhoto(pageData.doctor, 'nursingDocument', docType)
              "
              alt=""
              style="display: block; max-width: 98%; height: 24px"
              @click="handleSignImgClear('doctor')"
            />
          </div>
          <input
            v-else
            v-model="pageData.doctor"
            style="width: 180px; flex: 1"
            @blur="handleSignInputBlur('doctor')"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import {
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DatePicker from '@/components/MyComp/DatePicker.vue'
import Select from '@/components/MyComp/Select.vue'
import { useSign } from '@/hooks'

import DocHeader from '../DocHeader.vue'
import { baseData } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader,
    DatePicker,
    Select
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    docType: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      pageData: {},
      ryAdultEstimateRef: {},
      allergyHistoryList: [
        {
          value: '有',
          label: '有'
        },
        {
          value: '无',
          label: '无'
        },
        {
          value: '无法评估',
          label: '无法评估'
        },
        {
          value: '不详',
          label: '不详'
        }
      ],
      psychologicalList: [
        {
          value: '情绪稳定',
          label: '情绪稳定'
        },
        {
          value: '焦虑',
          label: '焦虑'
        },
        {
          value: '烦躁',
          label: '烦躁'
        },
        {
          value: '恐惧',
          label: '恐惧'
        },
        {
          value: '情绪低落',
          label: '情绪低落'
        },
        {
          value: '拒绝治疗',
          label: '拒绝治疗'
        },
        {
          value: '怪异行为',
          label: '怪异行为'
        },
        {
          value: '易激动',
          label: '易激动'
        },
        {
          value: '悲哀',
          label: '悲哀'
        },
        {
          value: '无法评估',
          label: '无法评估'
        }
      ],
      sleepList: [
        {
          value: '正常',
          label: '正常'
        },
        {
          value: '失眠',
          label: '失眠'
        },
        {
          value: '易梦',
          label: '易梦'
        },
        {
          value: '易惊醒',
          label: '易惊醒'
        },
        {
          value: '梦游',
          label: '梦游'
        },
        {
          value: '日夜颠倒',
          label: '日夜颠倒'
        },
        {
          value: '无法评估',
          label: '无法评估'
        }
      ],
      takeSedativesList: [
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        },
        {
          value: '无法评估',
          label: '无法评估'
        }
      ],
      painToolsList: [
        {
          value: 'NRS(数字评分)',
          label: 'NRS(数字评分)'
        },
        {
          value: 'VRS(口述分级)',
          label: 'VRS(口述分级)'
        },
        {
          value: 'FPS-R(改良面部表情疼痛评估工具)',
          label: 'FPS-R(改良面部表情疼痛评估工具)'
        },
        {
          value: 'FLACC疼痛行为指标量表',
          label: 'FLACC疼痛行为指标量表'
        },
        {
          value: 'NIPS疼痛评估量表',
          label: 'NIPS疼痛评估量表'
        },
        {
          value: 'CPOT疼痛行为指标量表',
          label: 'CPOT疼痛行为指标量表'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      skinList: [
        {
          value: '正常',
          label: '正常'
        },
        {
          value: '异常',
          label: '异常'
        }
      ],
      selfCareList: [
        {
          value: '无依赖',
          label: '无依赖'
        },
        {
          value: '轻度依赖',
          label: '轻度依赖'
        },
        {
          value: '中度依赖',
          label: '中度依赖'
        },
        {
          value: '重度依赖',
          label: '重度依赖'
        }
      ],
      fromList: [
        {
          value: '病人',
          label: '病人'
        },
        {
          value: '家属',
          label: '家属'
        },
        {
          value: '朋友',
          label: '朋友'
        },
        {
          value: '警察',
          label: '警察'
        },
        {
          value: '路人',
          label: '路人'
        },
        {
          value: '不详',
          label: '不详'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      specialCrowdList: [
        {
          value: '否',
          label: '否'
        },
        {
          value: '免疫功能低下患者',
          label: '免疫功能低下患者'
        },
        {
          value: '情感或精神混乱患者',
          label: '情感或精神混乱患者'
        },
        {
          value: '年老体弱患者（≥75岁患者）',
          label: '年老体弱患者（≥75岁患者）'
        },
        {
          value: '临终患者',
          label: '临终患者'
        },
        {
          value: '受虐待或忽视患者',
          label: '受虐待或忽视患者'
        }
      ]
    })

    const { signPhoto, queryUserSignByName } = useSign()

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        console.log('jsonText', jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
        state.pageData = jsonText.pageData
        state.ryAdultEstimateRef.setZd(jsonText.editZd)
      } else {
        nextTick(() => {
          state.pageData = cloneDeep(baseData)
        })
      }
    }

    function getParams() {
      return {
        pageData: state.pageData,
        editZd: state.ryAdultEstimateRef.editZd
      }
    }

    function handleSignInputBlur(key) {
      queryUserSignByName(
        [state.pageData[key]],
        'nursingDocument',
        props.docType
      )
    }

    function handleSignImgClear(key) {
      state.pageData[key] = ''
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      signPhoto,
      getParams,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

::v-deep .el-checkbox {
  display: block;
  margin-right: 0;
  padding: 12px 5px;
}

::v-deep .el-radio {
  padding: 12px 5px;
}

.mt-6 {
  margin-top: 15px;
  margin-bottom: 5px;
}

.p-12-5 {
  padding: 12px 5px;
}

.container1 {
  padding: 20px 0;
  line-height: 23px;
  // margin: getpx(30) auto 0;
  // width: calc(100% - 66px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  span {
    font-size: 14px;
  }

  .print-span {
    display: inline-block;
    font-size: 12px;
    border-bottom: 1px solid;
    vertical-align: text-bottom;
    word-break: break-all;
  }
}

.f-b {
  font-weight: bold;
}

.bor-t-box {
  margin-bottom: 10px;
  width: 100%;
  border-top: 1px solid #000;
}

.mt {
  &-3 {
    margin-top: 3px;
  }
}

.ml {
  &-30 {
    margin-left: 30px;
  }

  &-38 {
    margin-left: 38px;
  }

  &-42 {
    margin-left: 42px;
  }

  &-50 {
    margin-left: 50px;
  }

  &-60 {
    margin-left: 60px;
  }

  &-70 {
    margin-left: 70px;
  }

  &-73 {
    margin-left: 73px;
  }

  &-84 {
    margin-left: 84px;
  }

  &-240 {
    margin-left: 240px;
  }
}

.mb {
  &-3 {
    margin-bottom: 3px;
  }

  &-10 {
    margin-bottom: 10px;
  }
}

.mr {
  &-10 {
    margin-right: 10px;
  }

  &-15 {
    margin-right: 15px;
  }

  &-20 {
    margin-right: 20px;
  }
}

.m-0 {
  margin: 0;
}

.m-0-2 {
  margin: 0 2px;
}

.p-2 {
  padding: 2px;
}

.p-10-0 {
  padding: 10px 0;
}

.txt-c {
  text-align: center;

  input {
    text-align: center;
  }
}

.w-1 {
  width: 75px;
}

.w-2 {
  width: 260px;
}

.w-3 {
  width: 89px;
}

.w-4 {
  width: 500px !important;

  :deep {
    .el-input {
      width: 500px;
    }
  }
}

.w-5 {
  width: 76px !important;

  :deep {
    .el-input {
      width: 76px;
    }
  }
}

.w-6 {
  width: 66px;
}

.w-7 {
  width: 100px;
}

.w-8 {
  width: 14px;
}

.w-9 {
  width: 74px;

  :deep {
    .el-input {
      width: 74px;
    }
  }
}

.w-10 {
  width: 25px;
}

.w-11 {
  width: 116px;
}

.w-12 {
  width: 60px;
}

.w-13 {
  width: 127px;
}

.f-15 {
  font-size: 15px;
}

.relative {
  position: relative;
}

input {
  margin: 4px 2px;
  font-size: 12px;
}

.flex-end {
  justify-content: flex-end;
}

.inline-block {
  display: inline-block;
}

::v-deep {
  .el-select .el-input__inner,
  .el-select .el-input.is-focus .el-input__inner {
    width: 180px !important;
  }

  .textarea {
    flex: 1;
    margin-left: 5px;

    .el-textarea__inner {
      padding: 0;
      font-size: 14px;
      color: #000;
      border: none;
      line-height: 1.15;
      resize: none;
      word-break: break-all;
    }
  }

  .el-cascader__tags {
    width: 100%;
    transform: translateY(-61%);

    .el-tag {
      max-width: 60%;
    }
  }

  .el-date-editor {
    padding: 2px;
    width: 100px;

    .el-input__inner {
      font-size: 14px;
    }

    .el-input__suffix {
      display: inline-block;
    }
  }

  .el-select,
  .el-autocomplete {
    width: 500px;
    margin: 4px 2px;

    .el-input__suffix {
      display: inline-block;
      right: -6px;
      top: -3px;

      .el-icon-arrow-up {
        display: none;
      }

      .el-icon-circle-close {
        color: red;
      }
    }

    .el-input__inner {
      width: 500px;
      height: 15px;
      line-height: 15px;
    }
  }

  .el-cascader {
    border-bottom: 1px solid;
    line-height: 15px;
  }

  .el-cascader__search-input {
    height: 15px;
  }

  .el-input .el-input__inner {
    height: 18px;
    text-align: left;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }

  .el-cascader__search-input {
    margin-left: 0;
  }
}

.img {
  width: 20px;
  vertical-align: sub;
  cursor: pointer;

  &.add {
    margin: 5px 10px 0 0;
  }

  &:not(.add) {
    position: absolute;
    right: -20px;
    top: 3px;
  }
}

.print {
  ::v-deep {
    .el-select {
      padding-bottom: 1px;
      transform: translateY(-1px);
    }
  }

  .container1 {
    .print-spans {
      padding-bottom: 1px;
      transform: translateY(1px);
    }
  }

  input {
    padding-bottom: 1px;
    line-height: 14px;
  }
}
$border: 1px solid #000;

.container {
  padding-top: getpx(50);
  // margin: getpx(30) auto 0;
  // width: calc(100% - 40px);
  font-family: SiYuanSong-Medium;
  text-align: start;
}

.content {
  margin-top: 5px;
}

.inputStyle {
  // font-size: 10px;
  border: none;
  background-color: rgba($color: #000, $alpha: 0%);
  outline: none;
  width: 90%;
  height: 100%;
}

.w40 {
  width: 40px;
}

.w60 {
  width: 60px;
}

.flex {
  display: flex;
}

.tac {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex {
  @for $i from 1 through 30 {
    &-#{$i} {
      flex: $i;
    }
  }
}

.mb8 {
  margin-bottom: 8px;
}

.borr {
  border-right: 1px solid #000;
}

.bort {
  border-top: 1px solid #000;
}

.borl {
  border-left: 1px solid #000;
}

.borb {
  border-bottom: 1px solid #000;
}

.pad10 {
  padding: 10px;
}

.pad5 {
  padding: 5px;
}

.h30 {
  height: 38px;
}
</style>
